<template>
  <div class="com-container"
       style="width:100%;height:100%">
    <div class="com-chart"
         style="width:100%;height:100%"
         ref="licompar_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      isReady: false
    };
  },
  mounted () {
    this.initChart();
    this.isReady = true
    this.getData();
  },
  methods: {
    //初始化echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.licompar_ref);
    },
    //获取服务器数据 后续接口获取数据方法处
    getData () {
      let chartData = this.dashboardData.libraryProportion
      let xData = []
      let yData = []
      chartData.map((item) => {
        xData.push(item.proportion)
        if (item.college != null) {
          yData.push(item.college)
        }
        else if (item.dormitory != null) {
          yData.push(item.dormitory)
        } else {
          yData.push(item.major + item.grade)
        }

      })
      this.updataChart(xData, yData);
    },
    //更新图表
    updataChart (xData, yData) {
      var xnum = xData;
      const option = {
        tooltip: {},
        grid: {
          top: 0,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,


        },
        yAxis: {
          type: "category",

          axisLabel: {
            color: "rgba(255, 255, 255, 1)",
            margin: 10
          },
          offset: 15.5,
          data: yData,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
          // min:0,
          // max:10,
          // splitNumber:5
        },
        series: [
          {
            type: "bar",
            data: xnum,
            label: {
              show: true,
              position: "insideLeft",
              textStyle: {
                color: "black",
              },
            },
            barWidth: 28,
            barGap: "80%" /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
            showBackground: true,
            backgroundStyle: {
              color: "rgb(71, 95, 102)"
            },
            itemStyle: {
              normal: {
                barBorderRadius: [0, 33, 33, 0],
                color: function (params) {
                  var colorlist = [
                    "rgb(56,199,249)",
                    "rgb(220,252,122)",
                    "rgb(56,199,249)",
                    "rgb(220,252,122)",
                    "rgb(56,199,249)",
                    "rgb(220,252,122)",
                    "rgb(56,199,249)",
                    "rgb(220,252,122)",
                    "rgb(56,199,249)",
                    "rgb(220,252,122)",
                    "rgb(56,199,249)",
                  ];
                  return colorlist[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  }
  ,
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();
        }

      }
    }
  }
};
</script>

<style>
</style>